import React, { useEffect, useState } from 'react';
import { Col, Row } from 'antd';
import { GridContent, PageContainer } from '@ant-design/pro-layout';
import { history, IRouteComponentProps } from 'umi';
import { ArrowLeftOutlined } from '@ant-design/icons';
import RcResizeObserver from 'rc-resize-observer';
import { useRequest } from '@@/plugin-request/request';
import { getItem } from '@/services/aqchain-antd/item';
import ProCard from '@ant-design/pro-card';
import TitleCard from '@/pages/market/Item/components/TitleCard';
import PreviewCard from '@/pages/market/Item/components/PreviewCard';
import OperationCard from '@/pages/market/Item/components/OperationCard';
import SaleCard from '@/pages/market/Item/components/SaleCard';
import SaleHistoryCard from '@/pages/market/Item/components/SaleHistoryCard';
import { useModel } from '@@/plugin-model/useModel';
import { InitialState } from '@/app';
import SaleFormCard from '@/pages/market/Item/components/SaleFormCard';
import ApprovalCard from '@/pages/market/Item/components/ApprovalCard';
import AuctionCard from '@/pages/market/Item/components/AuctionCard';
import AuctionFormCard from '@/pages/market/Item/components/AuctionFormCard';

export declare type ItemInfoProps = {
  initialState:InitialState;
  item: API.ModelsItem;
  responsive?: boolean;
};

const ItemInfo: React.FC<IRouteComponentProps> = (
  props: IRouteComponentProps,
) => {

  // 获取url路径中参数
  const {
    match: {
      params: { fileHash },
    },
  } = props;
  // 全局变量
  const { initialState } = useModel('@@initialState');
  // 页面变量
  const {getItemState,item,loading,setResponsive} = useModel('item');

  // 获取作品数据
  useEffect(()=>{
    getItemState(fileHash,initialState?.contracts!);
  }, []);

  // 检查全局变量和作品数据
  if (!initialState|| !item || loading) {
    return <div/>;
  }

  return (
    <PageContainer
      loading={loading}
      header={{
        backIcon: <ArrowLeftOutlined />,
        onBack: () => history.goBack(),
        title: item?.name,
        breadcrumb: {},
      }}
    >
      <RcResizeObserver
        onResize={(offset) => {
          const payload = offset.width < 596;
          setResponsive(payload);
        }}
      >
        <ProCard loading={loading}>
          <GridContent>
            <Row gutter={24}>
              <Col lg={16} md={24}>
                <TitleCard />
                {/*<OperationCard initialState={initialState} item={item} responsive={responsive} />*/}
                <ApprovalCard/>
                <SaleFormCard/>
                <SaleCard/>
                {/*<TransCard item={data}/>*/}
                <AuctionFormCard/>
                <AuctionCard/>
              </Col>
              <Col lg={8} md={24}>
                <PreviewCard />
              </Col>
              <Col lg={24} md={24}>
                <SaleHistoryCard />
              </Col>
            </Row>
          </GridContent>
        </ProCard>
      </RcResizeObserver>
    </PageContainer>
  );
};

export default ItemInfo;
